:root {
  --primary-color: #f9532d;
}

/* Animación solo con text-shadow (sin afectar el color directamente) */
@keyframes glowPulse {
  0%, 100% {
    text-shadow: 0 0 10px var(--primary-color), 0 0 20px var(--primary-color);
  }
  50% {
    text-shadow: 0 0 2px var(--primary-color);
  }
}

/* Header */
.logo {
  font-size: 1.5rem;
  font-weight: 800;
  opacity: 0;
  animation: leftSideAni 1s ease forwards;
}

.logo a {
  color: #244D61;
  text-decoration: none;
}

header {
  position: sticky;
  top: 0;
  z-index: 100; /* Asegura que esté por encima */
  background: #fff; /* O el color que prefieras */
  box-shadow: 0 4px 17px rgba(0, 0, 0, .1);
  justify-content: space-between;
  display: flex;
  
}

nav {
  width: auto;
  display: flex;
  gap: .2rem;
  background-color: transparent;
  overflow: hidden;
  animation: rightSideAni 1s ease forwards;
}

nav * {
  margin: auto;
}

#navLINKS {
  margin-left: auto;
  display: flex;
  gap: 1rem;
}

.navlink {
  display: inline-block;
  padding: .3rem;
  text-decoration: none;
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: .7px;
  border-radius: 36px;
  line-height: 2;
  transition: color 0.3s, text-shadow 0.3s;
  opacity: 0;
  animation: navani .3s ease forwards;
  animation-delay: calc(.15s * var(--navAni));
  cursor: pointer;
}

.navlink:hover {
  color: #f9532d !important;
  text-shadow: 0 0 2px var(--primary-color), 0 0 2px var(--primary-color);
}

.navlink.active {
  color: var(--primary-color);
}

.logo img {
  cursor: pointer;
}

#click {
  display: none;
}

.menu {
  display: none;
  opacity: 0;
}

.mode i {
  font-size: 2rem;
  cursor: pointer;
  color: var(--primary-color);
  opacity: 0;
  animation: rightSideAni 1.5s ease forwards;
}

/* Contact me nav item con animación */
#contactHeader {
  color: var(--primary-color);
  animation: glowPulse 1.2s infinite;
  opacity: 1 !important;
  cursor: pointer;
  transition: color 0.3s, text-shadow 0.3s;
}

/* Al pasar el mouse: pausa la animación y aplica color naranja */
#contactHeader:hover {
  animation-play-state: paused;
  color: var(--primary-color);
  text-shadow: 0 0 8px var(--primary-color), 0 0 12px var(--primary-color);
}